<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>移动端登录页面原型设计</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
      background: #f5f6fa;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .container {
      display: flex;
      background: #fff;
      border-radius: 32px;
      box-shadow: 0 8px 32px rgba(60, 60, 120, 0.12);
      overflow: hidden;
      max-width: 900px;
      width: 100%;
      min-height: 600px;
    }
    .phone-mockup {
      background: linear-gradient(135deg, #ffe082 0%, #ffd54f 50%, #ffb300 100%);
      width: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      padding: 40px 0;
    }
    .login-card {
      width: 90%;
      max-width: 320px;
      background: rgba(255, 248, 225, 0.7);
      border-radius: 20px;
      box-shadow: 0 4px 24px rgba(120, 120, 180, 0.10);
      backdrop-filter: blur(8px);
      padding: 32px 24px 24px 24px;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }
    .login-title {
      font-size: 1.5rem;
      font-weight: bold;
      color: #333;
      text-align: center;
      margin-bottom: 8px;
    }
    .login-desc {
      color: #666;
      font-size: 0.95rem;
      text-align: center;
      margin-bottom: 12px;
    }
    .input-group {
      position: relative;
      margin-bottom: 10px;
      width: 100%;
      display: flex;
      flex-direction: column;
    }
    .input-label {
      font-size: 0.95rem;
      color: #333;
      margin-bottom: 4px;
      display: block;
    }
    .input-field {
      width: 100%;
      box-sizing: border-box;
      padding: 12px 44px 12px 14px;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      font-size: 1rem;
      background: rgba(255,255,255,0.9);
      outline: none;
      transition: border 0.2s;
      min-height: 44px;
      /* 适应屏幕，卡片内最大化 */
      display: block;
    }
    .input-field:focus {
      border: 1.5px solid #ffd54f;
    }
    .input-icon {
      position: absolute;
      right: 14px;
      top: 75%;
      transform: translateY(-50%);
      color: #ffb300;
      cursor: pointer;
      font-size: 1.25rem;
      pointer-events: auto;
      z-index: 2;
      /* 保证始终垂直居中 */
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .options-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.95rem;
      color: #666;
      margin-bottom: 10px;
    }
    .checkbox {
      accent-color: #ffd54f;
      margin-right: 4px;
    }
    .link {
      color: #ffb300;
      text-decoration: none;
      cursor: pointer;
      font-size: 0.95rem;
      transition: text-decoration 0.2s;
    }
    .link:hover {
      text-decoration: underline;
    }
    .login-btn {
      width: 100%;
      padding: 12px 0;
      background: linear-gradient(90deg, #ffe082 0%, #ffd54f 50%, #ffb300 100%);
      border: none;
      border-radius: 8px;
      color: #fff;
      font-size: 1.1rem;
      font-weight: bold;
      cursor: pointer;
      margin-top: 8px;
      transition: background 0.2s, box-shadow 0.2s;
      box-shadow: 0 2px 8px rgba(120, 120, 180, 0.10);
    }
    .login-btn:active {
      background: linear-gradient(90deg, #ffd54f 0%, #ffb300 100%);
    }
    .register-tip {
      text-align: center;
      color: #999;
      font-size: 0.95rem;
      margin-top: 10px;
    }
    .register-tip .link {
      color: #ffb300;
      margin-left: 4px;
    }
    /* 右侧说明 */
    .desc-panel {
      flex: 1;
      padding: 40px 36px;
      background: #f8f9fb;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-width: 340px;
    }
    .desc-title {
      font-size: 1.3rem;
      font-weight: bold;
      color: #333;
      margin-bottom: 18px;
    }
    .desc-section {
      margin-bottom: 18px;
    }
    .desc-section-title {
      font-weight: bold;
      color: #666;
      margin-bottom: 6px;
      font-size: 1.05rem;
    }
    .color-scheme {
      display: flex;
      gap: 10px;
      margin-bottom: 8px;
    }
    .color-block {
      width: 38px;
      height: 24px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.85rem;
      color: #fff;
      font-weight: bold;
    }
    .color-main { background: #ffe082; color: #333; }
    .color-sub { background: #ffd54f; color: #333; }
    .color-dark { background: #ffb300; }
    .color-gray { background: #666; }
    .color-bg { background: #fffde7; color: #333; }
    .desc-list {
      margin: 0;
      padding-left: 18px;
      color: #666;
      font-size: 0.98rem;
    }
    @media (max-width: 900px) {
      .container { flex-direction: column; min-height: unset; }
      .desc-panel { min-width: unset; padding: 24px 16px; }
      .phone-mockup { width: 100%; padding: 24px 0; }
    }
  </style>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon/fonts/remixicon.css">
</head>
<body>
  <div class="container">
    <div class="phone-mockup">
      <form class="login-card" onsubmit="return handleLogin(event)">
        <div class="login-title">欢迎回来</div>
        <div class="login-desc">请登录您的账号</div>
        <div class="input-group">
          <label class="input-label" for="username">用户名</label>
          <input class="input-field" id="username" name="username" type="text" placeholder="请输入用户名" required>
          <i class="ri-user-3-line input-icon"></i>
        </div>
        <div class="input-group">
          <label class="input-label" for="password">密码</label>
          <input class="input-field" id="password" name="password" type="password" placeholder="请输入密码" required>
          <i class="ri-eye-off-line input-icon" id="togglePwd" onclick="togglePassword()"></i>
        </div>
        <div class="options-row">
          <label><input class="checkbox" type="checkbox" id="rememberMe"> 记住我</label>
          <a class="link" href="#" onclick="alert('请联系管理员重置密码')">忘记密码？</a>
        </div>
        <button class="login-btn" type="submit">登录</button>
        <div class="register-tip">
          还没有账号？<a class="link" href="#" onclick="alert('请联系管理员注册账号')">立即注册</a>
        </div>
      </form>
    </div>
    <div class="desc-panel">
      <div class="desc-title">设计说明</div>
      <div class="desc-section">
        <div class="desc-section-title">色彩方案</div>
        <div class="color-scheme">
          <div class="color-block color-main">#ffe082</div>
          <div class="color-block color-sub">#ffd54f</div>
          <div class="color-block color-dark">#ffb300</div>
          <div class="color-block color-gray">#666</div>
          <div class="color-block color-bg">背景</div>
        </div>
        <ul class="desc-list">
          <li>采用更显美感的黄色渐变色调，从浅黄到亮黄，给人以温暖、活泼、现代的感觉，与小程序主题色协调。</li>
        </ul>
      </div>
      <div class="desc-section">
        <div class="desc-section-title">视觉元素</div>
        <ul class="desc-list">
          <li>毛玻璃效果：卡片使用 <b>backdrop-filter</b> 实现毛玻璃效果，增强层次感。</li>
          <li>圆角设计：所有元素采用圆角处理，提供友好舒适的视觉感受。</li>
          <li>用色简约：适当的间距增强层次感和布局体验。</li>
          <li>图标点缀：输入框右侧配有功能性图标，提升界面精致度。</li>
        </ul>
      </div>
      <div class="desc-section">
        <div class="desc-section-title">交互设计</div>
        <ul class="desc-list">
          <li>可点击反馈：所有交互元素都有点击、聚焦等视觉反馈。</li>
          <li>密码可见：密码框可切换明文/密文显示。</li>
          <li>登录按钮：点击有渐变色变化和阴影反馈。</li>
          <li>记住我：记住登录状态，提升用户体验。</li>
          <li>动效提示：忘记密码和注册按钮有弹窗提示。</li>
        </ul>
      </div>
      <div class="desc-section">
        <div class="desc-section-title">用户体验考量</div>
        <ul class="desc-list">
          <li>表单简洁明了，所有元素均居中对齐，减少认知负担。</li>
          <li>移动端适配，响应式布局，适合不同屏幕展示。</li>
        </ul>
      </div>
    </div>
  </div>
  <script>
    function togglePassword() {
      const pwd = document.getElementById('password');
      const icon = document.getElementById('togglePwd');
      if (pwd.type === 'password') {
        pwd.type = 'text';
        icon.className = 'ri-eye-line input-icon';
      } else {
        pwd.type = 'password';
        icon.className = 'ri-eye-off-line input-icon';
      }
    }
    function handleLogin(e) {
      e.preventDefault();
      const username = document.getElementById('username').value;
      const remember = document.getElementById('rememberMe').checked;
      alert('登录成功！\n用户名：' + username + '\n记住我：' + (remember ? '是' : '否'));
      return false;
    }
  </script>
</body>
</html> 